<template>
  <div class="p-6">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">健康概览</h1>
    
    <!-- 健康状态卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">血压状态</p>
            <p class="text-2xl font-bold text-green-600">正常</p>
          </div>
          <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
            <el-icon class="text-green-600 text-xl"><TrendCharts /></el-icon>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">心率</p>
            <p class="text-2xl font-bold text-blue-600">72 BPM</p>
          </div>
          <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
            <el-icon class="text-blue-600 text-xl"><Monitor /></el-icon>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">体重</p>
            <p class="text-2xl font-bold text-purple-600">65.5 kg</p>
          </div>
          <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
            <el-icon class="text-purple-600 text-xl"><CircleCheck /></el-icon>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow-md p-6">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">血氧</p>
            <p class="text-2xl font-bold text-orange-600">98%</p>
          </div>
          <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
            <el-icon class="text-orange-600 text-xl"><CircleCheck /></el-icon>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 健康趋势图表 -->
    <div class="mb-6">
      <el-row :gutter="20">
        <el-col :span="12">
          <HealthChart 
            title="血压趋势" 
            chart-type="line" 
            :data="bloodPressureData"
          />
        </el-col>
        <el-col :span="12">
          <HealthChart 
            title="体重趋势" 
            chart-type="line" 
            :data="weightData"
          />
        </el-col>
      </el-row>
    </div>
    
    <div class="mb-6">
      <HealthChart 
        title="心率趋势" 
        chart-type="line" 
        :data="heartRateData"
      />
    </div>
    
    <!-- 今日提醒 -->
    <div class="mt-8 bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold mb-4 text-gray-800">今日健康提醒</h2>
      <div class="space-y-3">
        <div class="flex items-center p-3 bg-blue-50 rounded-lg">
          <el-icon class="text-blue-600 mr-3"><Clock /></el-icon>
          <div>
            <p class="font-medium">血压测量提醒</p>
            <p class="text-sm text-gray-600">建议时间：上午9:00</p>
          </div>
        </div>
        
        <div class="flex items-center p-3 bg-green-50 rounded-lg">
          <el-icon class="text-green-600 mr-3"><Check /></el-icon>
          <div>
            <p class="font-medium">运动计划</p>
            <p class="text-sm text-gray-600">今日步数目标：8000步</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElCard, ElRow, ElCol, ElProgress, ElButton, ElIcon } from 'element-plus'
import { TrendCharts, CircleCheck, Calendar, Monitor, Clock, Check } from '@element-plus/icons-vue'
import HealthChart from '../components/HealthChart.vue'

const healthData = ref([
  { label: '血压', value: '120/80 mmHg', status: '正常', icon: 'Heart' },
  { label: '心率', value: '72 bpm', status: '正常', icon: 'Heart' },
  { label: '血氧', value: '98%', status: '优秀', icon: 'CircleCheck' },
  { label: '体重', value: '65 kg', status: '正常', icon: 'CircleCheck' },
])

const reminders = ref([
  { time: '09:00', title: '晨间血压测量' },
  { time: '12:00', title: '午餐后血糖测量' },
  { time: '18:00', title: '晚间运动时间' },
])

const bloodPressureData = computed(() => ({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  datasets: [
    {
      label: '收缩压',
      data: [120, 118, 122, 119, 121, 120, 118],
      borderColor: 'rgb(239, 68, 68)',
      backgroundColor: 'rgba(239, 68, 68, 0.1)',
      tension: 0.4
    },
    {
      label: '舒张压',
      data: [80, 78, 82, 79, 81, 80, 78],
      borderColor: 'rgb(59, 130, 246)',
      backgroundColor: 'rgba(59, 130, 246, 0.1)',
      tension: 0.4
    }
  ]
}))

const weightData = computed(() => ({
  labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
  datasets: [
    {
      label: '体重 (kg)',
      data: [65, 64.8, 64.5, 64.3, 64.1, 63.9],
      borderColor: 'rgb(34, 197, 94)',
      backgroundColor: 'rgba(34, 197, 94, 0.1)',
      tension: 0.4
    }
  ]
}))

const heartRateData = computed(() => ({
  labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  datasets: [
    {
      label: '心率 (bpm)',
      data: [65, 62, 72, 78, 75, 70, 68],
      borderColor: 'rgb(168, 85, 247)',
      backgroundColor: 'rgba(168, 85, 247, 0.1)',
      tension: 0.4
    }
  ]
}))

const activeTrend = ref(0)
</script>